<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE html>
<html>
	<head>
		<base href="<%=basePath %>">
		<meta charset="UTF-8">
		<title>Insert title here</title>
		<link rel='stylesheet' href="static/lib/layui/css/layui.css">
	</head>
	<body>
		<div style="width:100px" class="layui-input-block layui-input-inline">
			<select id='selecttext'>
				<option value="">请选择</option>
				<option value="n_id">公告序列号</option>
				<option value="u_id">发布者ID</option>
				<option value="n_readnum">阅读量</option>
				<option value="n_context">内容</option>
				<option value="n_title">标题</option>
			</select>
		</div>
		<input type="text" id='checktext' style="width:200px;height:28px">
		<table class="layui-table" lay-data="{toolbar:'#toolbar', url:'notice/list', page:true, id:'datalist'}"
			lay-filter="datalist">
			<thead>
				<tr>
					<th lay-data="{type:'checkbox'}"></th>
					<th lay-data="{field:'n_id', sort: true}">公告序列号</th>
					<th lay-data="{field:'u_id', sort: true}">发布者ID</th>
					<th lay-data="{field:'n_date'}">发布日期</th>
					<th lay-data="{field:'n_readnum' ,sort: true}">阅读量</th>
					<th lay-data="{field:'n_context'}">内容</th>
					<th lay-data="{field:'n_title'}">标题</th>
					<th lay-data="{toolbar: '#barOption'}" id="operation"></th>
				</tr>
			</thead>
		</table>
		<!-- 新增弹出层显示内容 -->
		<div class="addwin" style="display:none">
			<form class="layui-form" lay-filter="addform">
				<div class="layui-form-item">
					<label class="layui-form-label">公告序列号</label>
					<div class="layui-input-inline">
						<input type="text" name="n_id" placeholder="请输入公告序列号" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">发布者ID</label>
					<div class="layui-input-inline">
						<input type="text" name="u_id" placeholder="请输入发布者ID" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
		 		<label class="layui-form-label">发布日期</label>
					<div class="layui-input-inline">
						<input type="date" name="n_date" placeholder="请输入发布日期" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
		 		<label class="layui-form-label">阅读数</label>
					<div class="layui-input-inline">
						<input type="text" name="n_readnum" placeholder="请输入阅读量" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">内容</label>
					<div class="layui-input-inline">
						<textarea name="n_context" placeholder="请输入公告内容" autocomplete="off"
							class="layui-input"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">公告标题</label>
					<div class="layui-input-inline">
						<input type="text" name="n_title" placeholder="请输入公告标题" autocomplete="off" class="layui-input">
					</div>
				</div>
			</form>
		</div>

		<div class="updwin" style="display:none">
			<form class="layui-form" lay-filter="updform">
				<div class="layui-form-item">
					<label class="layui-form-label">公告序列号</label>
					<div class="layui-input-inline">
						<input type="text" id="n_id" name="n_id" placeholder="请输入公告序列号" autocomplete="off"
							class="layui-input" disabled>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">发布者ID</label>
					<div class="layui-input-inline">
						<input type="text" id="u_id" name="u_id" placeholder="请输入发布者ID" autocomplete="off"
							class="layui-input">
					</div>
				</div>
		 		<div class="layui-form-item">
					<label class="layui-form-label">发布日期</label>
					<div class="layui-input-inline">
						<input type="date" id="n_date" name="n_date" placeholder="请输入发布日期" autocomplete="off"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">阅读数</label>
					<div class="layui-input-inline">
						<input type="text" id="n_readnum" name="n_readnum" placeholder="请输入阅读量" autocomplete="off"
							class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">内容</label>
					<div class="layui-input-inline">
						<textarea id="n_context" name="n_context" placeholder="请输入公告内容" autocomplete="off"
							class="layui-input"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">公告标题</label>
					<div class="layui-input-inline">
						<input type="text" id="n_title" name="n_title" placeholder="请输入公告标题" autocomplete="off"
							class="layui-input">
					</div>
				</div>
			</form>
		</div>

		<div class="delwin" style="display:none">
			<form class="layui-form" lay-filter="delform">
				<div class="layui-form-item">
					<label class="layui-form-label">公告序列号</label>
					<div class="layui-input-inline">
						<input type="text" name="n_id" placeholder="请输入公告序列号" autocomplete="off" class="layui-input"
							disabled>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">发布者ID</label>
					<div class="layui-input-inline">
						<input type="text" name="u_id" placeholder="请输入发布者ID" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">发布日期</label>
					<div class="layui-input-inline">
						<input type="date" name="n_date" placeholder="请输入发布日期" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">阅读数</label>
					<div class="layui-input-inline">
						<input type="text" name="n_readnum" placeholder="请输入阅读量" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">内容</label>
					<div class="layui-input-inline">
						<textarea name="n_context" placeholder="请输入公告内容" autocomplete="off"
							class="layui-input"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">公告标题</label>
					<div class="layui-input-inline">
						<input type="text" name="n_title" placeholder="请输入公告标题" autocomplete="off" class="layui-input">
					</div>
				</div>
			</form>
		</div>
		
		<div id="noticewin"class="layui-card" style="display:none">
  			<div class="layui-card-body">
				<span id="ln_title" style="font-size:18px; text-algin:center"></span><br>
				<span id="ln_context"></span><br>
				阅读量:<span id="ln_readnum"></span><br>
				公告序列号:<span id="ln_id"></span><br>
				发布者ID:<span id="lu_id"></span><br>
				发布日期:<span id="ln_date"></span>
  			</div>
		</div>

		<!--行内工具栏  -->
		<script type="text/html" id="barOption">
			<div class="layui-btn-group">
				<button type="button" class="layui-btn layui-btn-sm layui-bg-green " lay-event="updateevent">编辑</button>
				<button type="button" class="layui-btn layui-btn-sm layui-bg-red" lay-event="deleteevent">删除</button>
				<button type="button" class="layui-btn layui-btn-sm layui-bg-blue" lay-event="noticeevent">查看</button>
			</div>
		</script>
		<!-- 头部工具栏 -->
		<script type="text/html" id="toolbar">
			<div class="layui-btn-group">
				<button type="button" class="layui-btn" lay-event="addevent">增加</button>
				<button type="button" class="layui-btn layui-bg-red" lay-event="delevent">删除</button>
				<button type="button" class="layui-btn" lay-event="checkevent">查找</button>
			</div>
		</script>

		<script type="text/javascript" src="static/lib/layui/layui.js"></script>
		<script type="text/javascript" id="toolbar">
			layui.use(['table', 'form'], function() {
				var table = layui.table;
				var form = layui.form;
				$ = layui.jquery;
				//监听工具条事件，删除表格中的一行数据
				table.on('tool(datalist)', function(obj) {
					var data = obj.data; //获取当前行的数据
					var layEvent = obj.event; //获取lay-event对应的值
					var tr = obj.tr; //获取当前行tr的DOM对象
					if (layEvent == 'deleteevent') {
						layer.confirm('确定要删除吗？', function(index) {
							layer.closeAll('dialog');
						 $.ajax({
								url: 'notice/del',
								type: 'post',
								data: {
									'n_id': data.n_id
								}, //向服务器端发送要删除的id
								success: function(res) {
									if (res != 0) {
										layer.closeAll();
										//提示
										layer.msg("删除成功", {
											icon: 1
										});
										//刷新表格
										table.reload("datalist");
									} else {
										layer.msg("删除失败", {
											icon: 1
										});
									}
								},
								error: function(res) {
									layer.msg("删除失败", {
										icon: 2
									});
								}
							});
						});
					} else if (layEvent == 'updateevent') {
						//#对应的是ID,.对应的是class
						$("#n_id").val(data.n_id); //设置编辑框的修改前的属性
						$("#u_id").val(data.u_id);
						$("#n_date").val(data.n_date);
						$("#n_readnum").val(data.n_readnum);
						$("#n_context").val(data.n_context); //设置编辑框的修改前的属性
						$("#n_title").val(data.n_title);
						layer.open({
							type: 1,
							title: "新增",
							area: ['400px', '600px'],
							content: $(".updwin"), //绑定的窗口
							btn: ["确认", "取消"],
							btn1: function() {
								//点击确定提交数据
								//验证
								//表单数据

								var formdata = form.val("updform");
								$.ajax({
									type: 'post',
									url: 'notice/upd',
									data: formdata,
									success: function(d) {
										if (d != 0) { //d表示后端传过来的数据，大于0就表示前台传送数据成功

											//关闭对话框
											layer.closeAll();
											//提示
											layer.msg("修改成功", {
												icon: 1
											});
											//刷新表格
											table.reload("datalist");
										} else {
											layer.msg("修改失败", {
												icon: 2
											});
										}
									},
									error: function() {
										layer.msg("修改失败", {
											icon: 2
										});
									}

								});
							},
							btn2: function() {
								layer.msg("点击取消", {
									time: 2000,
									icon: 5
								});
								return false; //不关闭窗口
							}
						});
					} else if (layEvent == 'noticeevent') {
						//#对应的是ID,.对应的是class
						$("#ln_id").text(data.n_id); //设置编辑框的修改前的属性
						$("#lu_id").text(data.u_id);
						$("#ln_date").text(data.n_date);
						$("#ln_readnum").text(data.n_readnum);
						$("#ln_context").text(data.n_context); //设置编辑框的修改前的属性
						$("#ln_title").text(data.n_title);
						var uri = "notice/look" + data.n_id;
						layer.open({
							  type:1,
							  title:"公告详情",
							  area:['800px','600px'],
							  content:$("#noticewin"),
							  btn:["确定"],
							  btn1:function(){
								  $.ajax({
									  type:'get',
									  url:uri,
									  success:function(d){
										  table.reload("datalist");
									  }
								  });
								  layer.closeAll();
								  
							  }
						  });
					}
				});
			})
		</script>
		<script type="text/javascript">
			var $ = layui.$;
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;

			//头部工具栏
			table.on("toolbar(datalist)", function(obj) {
				var event = obj.event;
				var config = obj.config;
				var checkdata = table.checkStatus(config.id);
				if (event == "delevent") {
					//获取表格中选中的数据
					var data = checkdata.data;
					form.val("delform", data[0]);
					//console.log(data.lenth);
					if (data.lenth == 0) {
						layer.msg("请先选中数据", {
							time: 2000,
							icon: 5
						});
					} else {
						layer.open({
							type: 1,
							title: "删除",
							area: ['400px', '600px'],
							content: $(".delwin"), //绑定的窗口
							btn: ["确定", "取消"],
							btn1: function() {
								//点击确定提交数据
								//用ajax提交
								//这里可以做验证
								var formdata = form.val("delform");
								$.ajax({
									type: 'post',
									url: 'notice/del',
									data: formdata,
									//d就是Servlet返回的count
									success: function(d) {
										if (d != 0) {
											//关闭对话框
											layer.closeAll();
											//提示
											layer.msg("数据删除成功", {
												icon: 1
											});
											//刷新
											table.reload("datalist");
										} else {
											layer.msg("数据删除失败", {
												icon: 2
											});
										}
									},
									error: function() {
										layer.msg("数据删除失败", {
											icon: 2
										});
									}
								})
							},
							btn2: function() {
								layer.closeAll();
							}
						});
					}
				} else if (event == "addevent") {
					layer.open({
						type: 1,
						title: "增加",
						area: ['400px', '600px'],
						content: $(".addwin"), //绑定的窗口
						btn: ["确定", "取消"],
						btn1: function() {
							//点击确定提交数据
							//用ajax提交
							//这里可以做验证
							var formdata = form.val("addform");
							$.ajax({
								type: 'post',
								url: 'notice/add',
								data: formdata,
								//d就是Servlet返回的count
								success: function(d) {
									if (d != 0) {
										//关闭对话框
										layer.closeAll();
										//提示
										layer.msg("数据保存成功", {
											icon: 1
										});
										//刷新
										table.reload("datalist");
									} else {
										layer.msg("数据保存失败", {
											icon: 2
										});
									}
								},
								error: function() {
									layer.msg("数据保存失败", {
										icon: 2
									});
								}
							})
						},
						btn2: function() {
							//layer.msg("点击取消",{time:2000,icon:5});
							//return fasle;//不关闭窗口
							layer.closeAll();
						}
					});


				} else if (event == "checkevent") {
					//点击查询
					var text = $("#checktext").val();
					var select = $("#selecttext").val();
					if (text == null) {
						table.reload("datalist");
					} else
						table.reload("datalist", {
							where: {
								'checktext': text,
								'selecttext': select
							},
							page: true
						});
				}
			});
		</script>
	</body>
</html>